<template>
	<view class="optical-cable-wrap">
		<nav-bar class="header" title="光缆详情" @goBack="goBack">
		</nav-bar>
		<!-- 展示详情 -->
		<view class="optical-cable-detail">
			<!-- :input-align="params.name.length > 18?'left':'right'"  -->
			<van-form>
				<van-field v-model="params.name||'--'" :colon="true" type='textarea' rows="1" autosize input-align="right" disabled
					label="光缆名称" />
				<van-field v-model="params.lineNumber||'--'" :colon="true" type='textarea' rows="1" autosize  disabled label="纤芯数量" input-align="right" />
				<van-field v-model="params.fiberTypeName||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="光缆类型" input-align="right" />
				<van-field v-model="params.voltageClassName||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="电压等级" input-align="right" />
				<van-field v-model="params.aresname||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="起始站点" input-align="right" />
				<van-field v-model="params.zresname||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="终止站点" input-align="right" />
				<van-field v-model="params.opticalorder||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="光缆顺序" input-align="right" />
				<van-field v-model="params.powerLine||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="所属线路" input-align="right" />
				<van-field v-model="params.length||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="光缆长度" input-align="right" />
				<van-field v-model="params.serviceStateName||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="设备状态" input-align="right" />
				<van-field v-model="params.jlrname||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="记录人" input-align="right" />
				<van-field v-model="params.jltimeText||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="记录时间" input-align="right" />
			</van-form>
		</view>
		<!-- tab切换 -->
		<div class="cable-info-tab">
			<div class="info-tab-item" :class="currentTab === 'cable' ? ' info-tab-current': ''"
				@click="tabChange('cable')">纤芯使用</div>
			<div class="info-tab-item" :class="currentTab === 'opticalPath' ? ' info-tab-current': ''"
				@click="tabChange('opticalPath')">承载光路</div>
		</div>

		<!-- 纤芯使用 -->
		<view class="cable-info" v-if="currentTab === 'cable'">
			<!-- A端 Z端 查看更多 -->
			<view class="terminal-point">
				<view class="terminal-point-option">
					<view class="terminal-point-tab">
						<div class="info-tab-item" :class="pointTab === 'A' ? ' point-tab-current': ''"
							@click="tabChange('A')">A端</div>
						<div class="info-tab-item" :class="pointTab === 'Z' ? ' point-tab-current': ''"
							@click="tabChange('Z')">Z端</div>
					</view>
					<view class="terminal-point-more" @click="jumpFiberCore">
						查看更多
					</view>
				</view>
				<!-- 卡片 -->
				<view class="terminal-point-card">
					<view class="terminal-point-item" v-for="(item,index) in qxList" :key="index">
						<view class="terminal-point-num">
							{{item.num}}
							<!-- <view class="terminal-point-rate" v-if="item.name.includes('率')">
								%
							</view> -->
						</view>
						<view class="terminal-point-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="cable-list" v-for="(item,index) in opticalCableList">
				<view class="cable-item" @click="jumpFiberCore">
					<!-- 标题行 -->
					<view class="cable-title">
						<view class="cable-title-left">
							<view class="cable-title-img">
								<image src="../../../../static/img/ydtz-opticalIcon.png" mode=""></image>
							</view>
							<view class="cable-title-name">
								{{item.sn}}
							</view>
						</view>
						<view class="title-icon" :class="item.occupyState == '5' ? 'green': 'red'">
							{{item.occupyState == '5'?'未占用':'已占用'}}
						</view>
					</view>
					<!-- 文本行 -->
					<view class="cable-text" v-if="item.lightPathName">
						光路名称：
						<span>
							{{item.lightPathName}}
						</span>
					</view>
				</view>
			</view>
		</view>

		<!-- 承载光路 -->
		<view class="optical-path-info" v-if="currentTab === 'opticalPath'">
			<view v-if="list.length > 0">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
						<standingCell @acquireId='acquireId' :list='list'>
						</standingCell>
					</van-list>
				</van-pull-refresh>
			</view>
			<view v-else class="site-other">
				— — 暂无数据，请选择其他类型查看 — —
			</view>
		</view>

	</view>
</template>

<script>
	import navBar from "../../../../components/common/nav-bar.vue";
	import standingCell from "../../../../components/standingBookComponents/cell/cell.vue"
	import echartsPie from '../../common/echartsPie.vue'
	import {
		getCableOverallDetail,
		getFibreCoreCount,
		getFibreCoreList,
		getLightpathListByFibre
	} from "../../../../api/ydtzApi.js"
	import {
		ActionSheet
	} from "vant";
	export default {
		data() {
			return {
				zresobjid: '',
				aresobjid: '',
				currentTab: "cable", // 当前显示内容 fibre-纤芯 cable-光缆 bussiness-业务
				list: [],
				refreshing: false, // 是否正在刷新
				finished: false,
				isLoading: false,
				total: 0, // 总条数
				page: 1,
				limit: 10,
				qxList: [{
					name: '纤芯总数',
					num: 24
				}, {
					name: '空余纤芯',
					num: 22
				}, {
					name: '已用纤芯',
					num: 23
				}, {
					name: '纤芯使用率',
					num: 24
				}, {
					name: '纤芯空闲率',
					num: 24
				}],
				opticalCableList: [],
				opticalCableIndex: 0,
				pointTab: 'A',
				params: {},
				opticalid: ''
			}
		},
		components: {
			navBar,
			standingCell,
			echartsPie
		},
		onLoad(option) {
			this.opticalid = option.objId
			this.getCableOverallDetail(option)
		},
		methods: {
			// 获取详情
			getCableOverallDetail(option) {
				this.$apiRequest.ydtzApi.getCableOverallDetail({
					objId: option.objId,
				}).then(({
					data: res
				}) => {
					this.params = res
					if(res.length){
						this.params.length = res.length+'KM'
					}
					this.aresobjid = res.aresobjid
					this.getFibreCoreCount(res.aresobjid)
					this.getFibreCoreList(res.aresobjid)
					this.zresobjid = res.zresobjid
				})
			},
			//获取AZ端数据
			getFibreCoreCount(option) {
				this.$apiRequest.ydtzApi.getFibreCoreCount({
					opticalid: this.opticalid,
					siteId: option
				}).then(({
					data: res
				}) => {
					for (let i in res) {
						if (i == 'amount') {
							this.qxList[0].num = res[i]
						}
						if (i == 'noUseAmount') {
							this.qxList[1].num = res[i]
						}
						if (i == 'useAmount') {
							this.qxList[2].num = res[i]
						}
						if (i == 'useRate') {
							this.qxList[3].num = res[i]
						}
						if (i == 'noUseRate') {
							this.qxList[4].num = res[i]
						}
					}
				})
			},
			// 获取纤芯列表
			getFibreCoreList(option) {
				this.$apiRequest.ydtzApi.getFibreCoreList({
					objId: this.opticalid,
					siteId: option,
					pageSize: 3,
					pageNum: 1,
				}).then(({
					data: res
				}) => {
					this.opticalCableList = res.rows
				})
			},
			// 获取列表
			getTaskListByAdminT() {
				let params = {
					pageSize: this.limit,
					pageNum: this.page,
					objId: this.opticalid,
				}
				this.$apiRequest.ydtzApi.getLightpathListByFibre(params)
					.then(({
						data: res
					}) => {
						this.list = this.list.concat(res.rows.map(item => {
							return {
								name: item.name,
								serviceStateName:'在用',
								secondArr: [
									{
										label: "纤芯占用",
										value: item.useSn
									},
									{
										label: "起始站点",
										value: item.astationName
									},
									{
										label: "速率",
										value: item.rate
									},
									{
										label: "终止站点",
										value: item.zstationName
									},									
								],
								...item
							}
						}));
						this.isLoading = false;
						this.refreshing = false;
						this.total = res.total
					})
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.list = [];
				this.getTaskListByAdminT();
			},
			loadMore() {
				// 加载完毕
				if (this.total > this.list.length) {
					this.page = this.page + 1;
					this.getTaskListByAdminT();
				} else {
					this.finished = true;
				}
			},
			changeopticalCable(index) {
				this.opticalCableIndex = index
			},
			// 纤芯管理跳转
			jumpFiberCore() {
				let siteId = null
				if (this.pointTab == 'A') {
					siteId = this.aresobjid
				} else {
					siteId = this.zresobjid
				}
				uni.navigateTo({
					url: `/pages/standingBook/communicationOpticalCable/fiberCoreDetail/fiberCoreDetail?siteId=${siteId}&objId=${this.opticalid}`
				})
			},
			// 查看更多页面
			viewAll() {
				uni.navigateTo({
					url: '/pages/standingBook/businessManagement/businessManagement'
				})
			},
			// 获取id进入详情页
			acquireId(value) {
				uni.navigateTo({
					url: `/pages/standingBook/opticalPathManagement/opticalPathDetail/opticalPathDetail?objId=${value.objId}`
				})
			},
			goBack() {
				uni.navigateBack()
			},
			tabChange(currentTab) {
				if (currentTab == 'A') {
					this.pointTab = currentTab
					this.getFibreCoreCount(this.aresobjid)
					this.getFibreCoreList(this.aresobjid)
				} else if (currentTab == 'Z') {
					this.pointTab = currentTab
					this.getFibreCoreCount(this.zresobjid)
					this.getFibreCoreList(this.zresobjid)
				} else {
					this.currentTab = currentTab;
					this.getTaskListByAdminT()
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f6fa;
	}

	.optical-cable-wrap {
		padding-bottom: px2vh(30);
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.optical-cable-detail {
		width: calc(100vw - #{px2vw(60)});
		background: #fff;
		border-radius: px2vw(20);
		margin: px2vh(30) auto;

		::v-deep .van-field__control:disabled {
			-webkit-text-fill-color: #333;
			font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		}
	}

	.cable-info-tab {
		width: calc(100% - #{px2vw(60)});
		height: px2vh(120);
		border-radius: px2vw(20);
		box-sizing: border-box;
		margin: px2vh(40) px2vw(30) px2vh(30);
		padding: 0 px2vw(10);
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.info-tab-item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			font-size: px2vw(38);

			&.info-tab-current {
				height: px2vh(100);
				//margin-right: px2vw(10);
				border-radius: px2vw(20);
				background-color: rgba(65, 122, 220, 1);
				color: rgba(255, 255, 255, 1);
				font-weight: Bold;
			}
		}
	}

	.title-icon {
		// width: px2vw(123);
		height: px2vh(50);
		border-radius: px2vh(10);
		font-weight: bold;
		text-align: center;
		line-height: px2vh(50);
		font-size: px2vh(32);
		padding: 0 px2vw(10);
	}
	.green {
		background: rgba(65, 220, 131, 0.1);
		color: #41dc83;
	}
	
	.red {
		background-color: rgba(255, 112, 112, 0.1);
		color: #ff7070;
	}

	.cable-item {
		width: calc(100% - #{px2vw(60)});
		padding: 0 px2vh(40);
		background: #fff;
		box-sizing: border-box;
		margin: 0 auto;
		border-radius: px2vh(16);
		margin-bottom: px2vh(30);

		.cable-text {
			font-size: px2vh(36);
			line-height: px2vh(62);
			padding: px2vh(38) px2vw(10);
			color: #A2A2A2;
			border-top: px2vh(2) solid #E5E5E5;

			& span {
				color: #666;
				font-weight: 600;
			}
		}

		.cable-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: px2vh(140);

			& .cable-title-left {
				display: flex;
				align-items: center;

				.cable-title-img {
					width: px2vh(64);
					height: px2vh(64);
					margin-top: px2vh(-40);
					margin-right: px2vh(25);

					image {
						width: 100%;
						height: 100%;
					}
				}

				.cable-title-name {
					font-size: px2vh(42);
					font-weight: bold;
				}
			}
		}
	}

	.bussiness-info {
		width: calc(100vw - #{px2vw(60)});
		height: px2vh(775);
		background: #fff;
		border-radius: px2vw(20);
		margin: 0 auto;
		box-sizing: border-box;

		.pieChart2 {
			width: 100%;
			height: px2vh(505);
			padding: px2vh(20) 0;

		}

		.optical-cable-tab {
			height: px2vh(118);
			display: flex;
			margin: 0 px2vw(20);
			box-sizing: border-box;
			font-size: px2vh(32);
			color: #666666;
			line-height: px2vh(62);
			align-items: center;
			justify-content: space-between;
			border-bottom: px2vh(1) solid #e5e5e5;

			.optical-cable-item {
				width: 25%;
				overflow: hidden;
				height: px2vh(108);
				line-height: px2vh(108);
				text-align: center;
			}

			.active {
				color: #417adc;
				font-weight: 700;
				border-bottom: px2vh(10) solid #417ADC;
			}
		}
	}

	.view-all {
		margin: 0 px2vw(20);
		font-size: px2vh(32);
		color: #aaa;
		text-align: center;
		line-height: px2vh(113);
		border-top: px2vh(2) dashed #eee;
	}

	.terminal-point {
		.terminal-point-option {
			width: calc(100vw - #{px2vw(60)});
			// background-color: #fff;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			font-size: px2vh(40);
			color: #666666;
			margin-bottom: px2vh(30);

			.terminal-point-more {
				color: #417adc;
			}

			.terminal-point-tab {
				width: px2vw(200);
				display: flex;
				justify-content: space-between;

				.point-tab-current {
					font-weight: 700;
					color: #417adc;
					border-bottom: px2vh(10) solid #417adc;
				}
			}
		}

		.terminal-point-card {
			width: calc(100vw - #{px2vw(60)});
			height: px2vh(380);
			background: #ffffff;
			border-radius: px2vh(20);
			margin: 0 auto;
			margin-bottom: px2vh(30);
			display: flex;
			flex-wrap: wrap;
			padding: px2vh(47) 0;
			box-sizing: border-box;

			.terminal-point-item {
				width: 33%;
				display: flex;
				flex-direction: column;
				text-align: center;
				justify-content: center;

				.terminal-point-num {
					font-size: px2vh(52);
					font-weight: 700;
					color: #666666;
					display: flex;
					justify-content: center;
					align-items: flex-end;

					.terminal-point-rate {
						font-size: px2vh(32);
						margin-bottom: px2vh(8);
						margin-left: px2vh(4);
					}
				}

				.terminal-point-name {
					opacity: 0.7;
					font-size: px2vh(32);
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
	.site-other {
		// position: absolute;
		// bottom: 4%;
		height: px2vh(500);
		width: 100vw;
		text-align: center;
		font-size: px2vh(36);
		color: #9B9CAA;
		font-weight: 600;
		line-height: px2vh(500);
	}
	/deep/ .cell-line-item {
		width: 46%;
	}
	
	/deep/ .cell-line-item:nth-child(even) {
		width: 54%;
	}
</style>